<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<div>
				
				<input type="button" value="切换" @click="flag=!flag" />
			</div>
			
			<!--
				v-if:每次都会重新删除或创建元素
					有较高的切换性能消耗
			-->
			<h1 v-if="flag">v-if涉及标签</h1>
			<!--
				v-show：每次不会对DOM进行删除和创建操作，
					只是切换了元素的display：none样式
					有较高的初始渲染消耗
			-->
			<h1 v-show="flag">v-show涉及标签</h1>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				flag:true
			},
			methods:{
				
			}
		});
	</script>
</html>
